<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>
    
    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/archives.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>

</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 70px">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <div class="timebox card mt-3 bg-light">
              <div class="timeline mt-3">
                <h3>
                  2022
                </h3>
                <ul>
                  <li>
                      <h4>
                        17日<span>06月</span>
                      </h4>
                      <a href="#" target="_blank">
                        面向对象四大特性
                      </a>
                  </li>
                  <li>
                    <h4>
                        19日<span>06月</span>
                    </h4>
                    <a href="#" target="_blank">
                      JDBC编程步骤
                    </a>
                  </li>
                </ul>

                <h3>
                  2023
                </h3>
                <ul>
                  <li>
                      <h4>
                        17日<span>06月</span>
                      </h4>
                      <a href="#" target="_blank">
                        面向对象四大特性
                      </a>
                  </li>
                  <li>
                    <h4>
                        19日<span>06月</span>
                    </h4>
                    <a href="#" target="_blank">
                      JDBC编程步骤
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- 侧边栏
              sidebar：用于使用jQuery引入侧边栏组件
              col-md-4：此侧边栏站整个网格的4份
              mb-5：侧边栏距离下面5rem
              d-none d-sm-block：在xs尺寸下隐藏，适用于手机
          -->
          <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
            <my-sidebar></my-sidebar>
          </div>
        </div>
      </div>
    </section>
  </div>  
  
  <script>
    new Vue({
      el:"#app",
      data() {
        return {
        }
      },
      components: {
          // 将组建加入组建库
          'my-header': httpVueLoader('./common/header.vue'),
          'my-sidebar': httpVueLoader('./common/sidebar.vue')
      }
    })
  </script>

</body>

</html>